import { Button, Form, Input, Select, Table, } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import React, { useEffect, useState,useRef } from 'react';
import Styles from "./../../assets/styles/shoptype.module.less"
import AddshopType from "../../components/AddshopType.jsx"
import { serviceType ,statistics} from '../../apis/service'

import qs from "querystring"

const { Option } = Select;


function DataService() {
  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [data, setData] = useState([])

  useEffect(() => {
    forceUpdate({});
    fetchData()
  }, [])

  const fetchData = async () => {
    const res = await statistics()
    console.log(res.data.rows.children)
    setData(res.data.rows.children)
  }
  //重置
  const clearForm = useRef()
  const resetting = () => {
    clearForm.current.resetFields()
  }
  //表格
  const columns = [

    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '平均价格',
      dataIndex:['statistics','averagePrice'],
      key: 'averagePrice',
    },
    {
      title: '提供服务总数',
      dataIndex: ['statistics','consumptionQuantity'],
      key: 'consumptionQuantity',
    },
    {
      title: '消费数量',
      dataIndex: ['statistics','numberServe'],
      key: 'numberServe',
    },
    {
      title: '消费总价',
      dataIndex: ['statistics','consumptionTotal'],
      key: 'consumptionTotal',
    },

  ];


  //搜索
  const onFinish = async (values) => {

    console.log(values)
    const h=qs.stringify(values)
    console.log(h)
    const res = await statistics(h)
    console.log(res)
    setData(res.data.rows.children)
  }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
  };


  return (
    <div>
    <div className={Styles.headerOne}>
      <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
        <Form.Item
          name="name"
          label="名称:"
        >
          <Input placeholder="" />
        </Form.Item>
        <div className={Styles.findOne}>
          <Form.Item shouldUpdate>
            {() => (
              <Button type="primary" htmlType="submit" className={Styles.find}>
                查询
              </Button>
            )}
          </Form.Item>
          <Button className={Styles.findTwo} onClick={resetting}>重置</Button>
        </div>

      </Form>
    </div>
    {/* 新增抽屉 */}
    {/* <div style={{ display: "flex", flexDirection: "row" }}>
      <div><AddshopType treedata={data}></AddshopType></div>
      <div style={{ marginLeft: "20px" }}><Button>删除</Button></div>
    </div> */}


    <div style={{ marginTop: "20px" }}>
      <Table
        columns={columns}
        rowSelection={{
          ...rowSelection,
          checkStrictly,
        }}
        dataSource={data}
        bordered
        rowKey="id"
        pagination={{
          pageSize: 10,
          pageSizeOptions: [5,10,15],
          showSizeChanger: true,
          showQuickJumper: true
        }}
        size="large"
      />
    </div>
  </div>
  )
}

export default DataService